<template>
  <div>
    <PageWrapper :dense="true" :contentFullHeight="true" contentBackground>
      <BasicTable @register="registerTable">
        <template #toolbar>
          <a-button type="primary" preIcon="ion:add-outline" @click="handleCreate"
            >新建表单模板</a-button
          >
        </template>
        <template #action="{ record }">
          <TableAction
            :actions="[
              {
                label: '删除',
                icon: 'ic:outline-delete-outline',
                popConfirm: {
                  title: '是否要删除数据？',
                  placement: 'top',
                  confirm: handleDelete.bind(null, record),
                },
                // auth: 'super', // 根据权限控制是否显示: 有权限，会显示
              },
            ]"
          />
        </template>
      </BasicTable>
      <!-- 新建/修改表单 -->
      <AddForm @register="registerModal" @success="reload()" />
    </PageWrapper>
  </div>
</template>
<script lang="ts" setup>
  import { PageWrapper } from '/@/components/Page';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { useModal } from '/@/components/Modal';

  import { tableColumns, searchFormSchema } from './tableData';
  import AddForm from './AddForm.vue';

  const [registerTable, { reload }] = useTable({
    // 分页配置
    columns: tableColumns(),
    useSearchForm: true,
    formConfig: searchFormSchema(), // 表单配置
    showTableSetting: true, // 显示表格设置工具
    showIndexColumn: false,
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    rowKey: 'id',
    bordered: true,
    actionColumn: {
      width: 200,
      fixed: 'right',
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  });

  // 新增修改表单弹窗
  const [registerModal, { openModal: openFormModal }] = useModal();

  // 删除
  function handleDelete(record: Recordable) {
    reload();
    console.log(record);
  }

  // 新建
  async function handleCreate() {
    openFormModal(true, { isUpdate: false });
  }
</script>
